<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        textarea {
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="">
            姓名：
            <input type="text" name="" id="" v-model="name"><br>
            性别：
            <input type="radio" name="sex" v-model="sex" value="male">男
            <input type="radio" name="sex" v-model="sex"value="female">女<br>
            爱好：
            <input  type="checkbox" v-model="hobby" value="ball">篮球
            <input  type="checkbox" v-model="hobby" value="sing">唱歌
            <input  type="checkbox" v-model="hobby" value="write">写代码<br>
            职业：
            <select v-model="profession" name="" id="" multiple>
                <option value="老板">老板</option>
                <option value="软件工程师">软件工程师</option>
                <option value="律师">律师</option>
                <option value="教师">教师</option>
            </select><br><br>
            个人简介:
            <textarea v-model.trim="message" name="" id="" cols="30" rows="10"></textarea><br>
            年龄：
            <input v-model.number="age" type="text" name="" id=""><br>
            城市：
            <select v-model="city" name="" id="">
                <option value="请选择城市" disabled>请选择城市</option>
                <option value="厦门">厦门</option>
                <option value="福州">福州</option>
            </select><br>
            <input type="checkbox" v-model="checked">同意协议
            <input type="button" :disabled="checked===false" value="提交" @click="tomsg">
            <p>{{msg}}
            <p>
        </form>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                name: '',
                sex: 'male',
                hobby: [],
                profession: [],
                message: '',
                age: 18,
                city: '请选择城市',
                msg: '',
                checked:false
            }
        },
        methods: {
            tomsg() {
                this.msg = '用户名-' + this.name + '\t年龄-' + this.age + '\t性别-' + this.sex + '\t爱好-' + this.hobby + '\t职业-' + this.profession + '\t自我介绍-' + this.message + '\t城市-' + this.city
            }
        },
    })
</script>

</html>